{% extends "base.html" %}
{% block title %}{% endblock %}

{% block content %}
<br>
<style>

        .layui-table-cell {
            line-height:28px,
            padding:0 15px,
            position:relative,
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:normal;
            box-sizing:border-box;
        }

        .layui-table-box {
            overflow: visible;
        }

        .layui-table-body {
            overflow: visible;
        }
        /* 设置下拉框的高度与表格单元相同 */
        td .layui-form-select{
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
    </style>
<div class="layui-body" style="overflow:auto;left:1px">
    <form class="layui-form" action="" id="cross_srh" lay-filter="cross_srh">
    <div class="proxy_srh">
        <div class="layui-inline">
            <div class="layui-inline">
               <br>
                <div class="layui-input-inline">
                    <label class="layui-form-label">project：</label>
                    <div class="layui-input-inline">
                        <select class="layui-select" name="project_name" id="project_name" lay-verify="" lay-search
                                lay-filter="project_name">

                            {% for d in projectAll %}
                                <option value="{{d.id}}">{{d.project_name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <label class="layui-form-label">module：</label>
                    <div class="layui-input-inline" id="module_div">
                       <select class="layui-select" name="module_name" id="module_name" lay-verify="" lay-search
                                lay-filter="module_name">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div> <div class="layui-input-inline">
                <span id="redTips" style="color:red">此时为新增状态，即会插入一条新数据!</span>
                    </div>
                <br>
                <br><br>
                <div class="layui-input-inline">
                    <label class="layui-form-label">effect：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" required  name="effect" id="effect" placeholder="请输入"
                               style="width:475%">
                    </div>
                </div>
                <br><br>

                <div class="layui-input-inline">
                    <label class="layui-form-label">method：</label>
                    <div class="layui-input-inline">
                       <select class="layui-select" name="method" id="method" lay-verify="" lay-search
                                lay-filter="method">
                            <option value="POST">POST</option>
                           <option value="GET">GET</option>
                           <option value="PUT">PUT</option>
                           <option value="DELETE">DELETE</option>
                        </select>
                    </div>
                </div>

                <div class="layui-input-inline">
                    <label class="layui-form-label">ctn_type：</label>
                    <div class="layui-input-inline">
                       <select class="layui-select" name="req_type" id="req_type" lay-verify="" lay-search
                                lay-filter="req_type">
                            <option value="0">application/json </option>
                            <option value="1">application/x-www-form-urlencoded</option>
                            <option value="2">multipart/form-data </option>
                            <option value="3">text/xml</option>
                           <option value="4">raw</option>
                        </select>
                    </div>
                </div>

                <div class="layui-input-inline">
                    <label class="layui-form-label">host：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="host" id="host" placeholder="请输入" style="width:212px">
                    </div>
                </div>
                 <br><br>
                <div class="layui-input-inline">
                    <label class="layui-form-label">path：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" required  name="path" id="path" placeholder="请输入" style="width:475%">
                    </div>
                </div>
                <br><br>
                <div class="layui-input-inline">
                    <label class="layui-form-label">pre_case：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="pre_caseId" id="pre_caseId" placeholder="请输入" style="width:212px">
                    </div>
                </div>

                <div class="layui-input-inline">
                    <label class="layui-form-label">run_times：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="run_times" value="1" id="run_times" placeholder="请输入" style="width:212px">
                    </div>
                </div>
                <div class="layui-input-inline">
                    <label class="layui-form-label">concurrent：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="concurrent" id="concurrent"  value="1" placeholder="请输入" style="width:212px">
                    </div>
                </div>
                <br><br>
                <div class="layui-input-inline">
                    <label class="layui-form-label">note：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="note" id="note" placeholder="请输入" style="width:475%">
                    </div>
                </div>
                <hr class="layui-bg-gray">

                <div class="layui-input-inline">
                    <label class="layui-form-label">headersJson：</label>
                    <div class="layui-input-inline">
                        <textarea name="headersJson" id="headersJson" placeholder="请输入" class="layui-textarea" style="width:484%;height:200px"></textarea>
                    </div>
                </div>
                <hr class="layui-bg-gray">

                <div class="layui-input-inline">
                    <label class="layui-form-label">bodysJson：</label>
                    <div class="layui-input-inline">
                        <textarea name="bodysJson" id="bodysJson" placeholder="请输入" class="layui-textarea" style="width:484%;height:200px"></textarea>
                    </div>
                </div>

                <hr class="layui-bg-gray">
                <div class="layui-input-inline">
                    <label class="layui-form-label">chkJson：</label>


                    <div class="layui-input-inline">
                        <div class="layui-btn-group">
                      <button data-type="add" class="layui-btn layui-btn-xs" id="add">
                        <i class="layui-icon">&#xe654;</i>
                      </button>

                      <button data-type="sub" class="layui-btn layui-btn-xs" id="sub">
                        <i class="layui-icon">&#xe640;</i>
                      </button>

                    </div>
                        <table class="layui-hide" id="chkJson" lay-filter="chkJson"></table>
                    </div>

                </div>
                <div class="layui-input-inline" style="display:none">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="id" id="id" placeholder="请输入">
                    </div>
                </div>
                <div class="layui-input-inline" style="display:none">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="case_id" id="case_id" placeholder="请输入">
                    </div>
                </div>
                <br><br>

            </div>
        </div>
    </div>
</form>

</div>
<script>

    layui.use(['table','code'], function(){
          var table = layui.table
          ,form = layui.form;
          var $= layui.jquery;
          //存储在内存中的当前apiCase的一行数据
          apiCase = layui.data('test').apiCase;
          if(apiCase == undefined){
                apiChkJson = [{"chkStr":"200","chkType":"==","chkWhere":"status_code"},
                    {"chkStr":"","chkType":"","chkWhere":""},
                ]
          }else{
                apiChkJson = apiCase.chkJson;
                apiChkJson = JSON.parse(apiChkJson);
                form.val('cross_srh',{
                    id:apiCase.id,
                    project_id:apiCase.project_id,
                    module_id:apiCase.module_id,
                    effect:apiCase.effect,
                    method:apiCase.method,
                    req_type:apiCase.req_type,
                    host:apiCase.host,
                    path:apiCase.path,
                    pre_caseId:apiCase.pre_caseId,
                    run_times:apiCase.run_times,
                    concurrent:apiCase.concurrent,
                    headersJson:apiCase.headersJson,
                    bodysJson:apiCase.bodysJson,
                    case_id:apiCase.case_id


                });
                if(apiCase.id!=undefined){
                    if(apiCase.id!=""){
                        $("#redTips").html('<span id="redTips" style="color:red;left:300px">此时为更新状态!</span>');
                    }
                }
                //$('#project_name option:selected').val();

                $("#project_name").find("option[value='"+apiCase.project_id+"']").attr("selected",true);

                $.ajax({
                         //发出请求
                        type:"GET",
                        url:"/moudle/all/select?",
                        contentType: 'application/json; charset=utf-8',
                        dataType:"json",
                        data:{"project_id":apiCase.project_id,"moudle_type":"1"},
                        success: function(result){
                            s1 = '<div class="layui-input-inline"> <select class="layui-select" name="module_name" id="module_name" lay-verify="" lay-search lay-filter="module_name"><option value="">请选择</option>';
                            e1 = '</select></div>';
                             if(result.data.length>0){

                                str = '';
                                layui.each(result.data,function(k,v){
                                        str = str+'<option value="'+v.id+'">'+v.moudle_name+'</option>'
                                });
                                htmlDiv = s1+str+e1;
                                $("#module_div").html(htmlDiv);


                             }else{
                                $("#module_div").html(s1+e1);
                             }
                             $("#module_name").find("option[value='"+apiCase.module_id+"']").attr("selected",true);
                             form.render();


                       }
                    });


                form.render();

          };


          var  options = {
                elem:'#chkJson',
                skin:"line",
                page:false,
                cols:[[
                       {type: "checkbox"}
                       ,{type: "numbers",title:"序号"}
                       ,{field: "chkStr", title: "内容",width:375,edit: 'text'}
                       ,{field: "chkType", title: "关键字",width:200, templet: function (d) {
                            if (d.chkWhere == 'status_code'){
                                return '<select name="chkType" lay-filter="chkType" data-value="'+d.chkType+'">'+
                                        '<option value="==">==</option>'+
                                        '<option value="!=">!=</option>'+
                                        '<option value="in">in</option>'+
                                        '<option value="not in">not in</option>'+
                                        //'<option value=">=">>=</option>'+
                                        //'<option value="<="><=</option>'+
                                        //'<option value=">">></option>'+
                                        //'<option value="<"><</option>'+
                                    '</select>';
                            }else{
                                return '<select name="chkType" lay-filter="chkType" data-value="'+d.chkType+'">'+
                                        '<option value="in">in</option>'+
                                        '<option value="not in">not in</option>'+
                                    '</select>';
                            }

                       }}
                       ,{field: "chkWhere", title: "位置",width:200, templet: function (d) {

                            return '<select name="chkWhere" lay-filter="chkWhere" data-value="'+d.chkWhere+'">'+
                            '    <option value="status_code">status_code</option>'+
                            '    <option value="responseHeader">responseHeader</option>'+
                            '    <option value="responseBody">responseBody</option>'+
                            '</select>';

                       }}
                ]],
                id:'chkJson',
                data:apiChkJson,
                done:function(res,cur,count){
                    var tableElem = this.elem.next('.layui-form.layui-border-box.layui-table-view');
                    count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                    layui.each(tableElem.find('select'), function (index, item) {
                        var elem = $(item);
                        elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                    });
                    form.render();
                }
          };

          var tableIns = table.render(options);

          $('#add').on('click',function(){
             data = table.cache['chkJson'];
             data.push({"chkStr":"","chkType":"","chkWhere":""});
             table.reload('chkJson',{data:data});
             form.render('select');
             return false;
          });
          var tabArr=new Array();
          table.on('checkbox(chkJson)', function(obj){

                  tabArr.push(obj);
          });

          form.on('select(chkWhere)', function(obj){
                  row = obj.elem.parentNode.parentNode.parentNode.rowIndex;
                  table.cache.chkJson[row].chkWhere = obj.value;

                  form.render('select');
          });
          form.on('select(chkType)', function(obj){
                  row = obj.elem.parentNode.parentNode.parentNode.rowIndex;
                  table.cache.chkJson[row].chkType = obj.value;
                  form.render('select');
          });

          form.on('select(project_name)', function(obj){
                $.ajax({
                         //发出请求
                        type:"GET",
                        url:"/moudle/all/select?",
                        contentType: 'application/json; charset=utf-8',
                        dataType:"json",
                        data:{"project_id":obj.value,"moudle_type":"1"},
                        success: function(result){
                            s1 = '<div class="layui-input-inline"> <select class="layui-select" name="module_name" id="module_name" lay-verify="" lay-search lay-filter="module_name"><option value="">请选择</option>';
                            e1 = '</select></div>';
                             if(result.data.length>0){

                                str = '';
                                layui.each(result.data,function(k,v){
                                        str = str+'<option value="'+v.id+'">'+v.moudle_name+'</option>'
                                });
                                htmlDiv = s1+str+e1;
                                $("#module_div").html(htmlDiv);


                             }else{
                                $("#module_div").html(s1+e1);
                             }
                             form.render();


                       }
                    });
                  form.render('select');
          });

          $('#sub').on('click',function(){
              var checkStatus = table.checkStatus('chkJson');
              if(checkStatus.isAll){
                 table.reload('chkJson',{data:[]});
                 return false;
              }else{
                  layui.each(tabArr,function(k,v){
                    v.del();
                  });
              }
              return false;
          });

          divRunContent = '<div class="layui-inline" style="left: 10px;top:3px"><button type="button" id="runCase" class="layui-btn layui-btn-warm layui-btn-sm">'+
                          ' 保存&运行'+
                        '</button>'+
                        '<button type="button" id="caseSave" class="layui-btn layui-btn-sm"> 保存 </button> <button type="button" id="newAdd" class="layui-btn layui-btn-warm layui-btn-sm">'+
                        '  置为待新增状态 '+
                        '</button><button type="button" id="addParams" class="layui-btn layui-btn-sm"> 创建关联 </button></div><hr class="layui-bg-gray"> <div class="layui-inline"><pre id="json"></pre></div>';
          index = layer.open({
                            type:1,
                            skin: 'demo-class',
                            content:divRunContent,
                            area:['666px','346px'],
                            offset:  'rb',
                            title:$('#path').val() + "——运行",
                            closeBtn:0,
                            shade: 0,
                            id:"runApiCase",
                            shadeClose:true,
                            maxmin: true,
                            success: function(index, layero){


                            }
                     });

          $('#newAdd').on('click',function(){
                $('#id').val("");
                $('#case_id').val("");

                $("#redTips").html('<span id="redTips" style="color:red;left:300px">此时为新增状态，即会插入一条新数据!</span>');
                $('#effect').val("");
                //$('#path').val("");
                return false;

          });
          //addParams
          $('#addParams').on('click',function(){
                project_id = $('#project_name option:selected').val();
                case_id = $('#case_id').val();

                layui.data('test', {key: 'apiCaseParams',value: {"project_id":project_id,"case_id":case_id,"where":"manage"}});
                layer.open({
                            type:2,
                            content:"/api/case/params/manage",
                            area:['425px','527px'],
                            //offset: ['231px','307px'],
                            title:"变量管理",
                            closeBtn:1,
                            shade: 0,
                            shadeClose:true,
                            cancel: function(index, layero){

                            }
                });
          });

          $('#runCase').on('click',function(){
               $('#caseSave').click();
               $.ajax({
                     //发出请求
                    type:"GET",
                    url:"/case/api/run/byId?",
                    contentType: 'application/json; charset=utf-8',
                    dataType:"json",
                    data:{"caseId":$('#id').val()},
                    success: function(result){
                         $('#json').jsonViewer(result);
                   }
                });

          });

          $('#caseSave').on('click',function(){
                //处理数据
                //table.reload(options);

                id= $('#id').val();

                project_id = $('#project_name option:selected').val();
                module_id = $('#module_name option:selected').val();
                effect = $('#effect').val();
                method =  $('#method option:selected').val();
                req_type  =  $('#req_type option:selected').val();
                host = $('#host').val();
                path = $('#path').val();
                pre_caseId = $('#pre_caseId').val();
                run_times = $('#run_times').val();
                concurrent = $('#concurrent').val();
                note = $('#note').val();
                headersJson = $('#headersJson').val();
                bodysJson = $('#bodysJson').val();
                if(headersJson == ""){
                    headersJson = "{}"
                }
                if(bodysJson == ""){
                    bodysJson = "{}"
                }

                person = layui.data('test').UserInfo.userId;
                chkJson = table.cache['chkJson'];
                if(effect == "" || path == ""){
                    layer.msg("effect、path必须填写!");
                    return false;
                }

                $.ajax({
                     //发出请求
                    type:"POST",
                    url:"/case/api/manage",
                    contentType: 'application/json; charset=utf-8',
                    dataType:"json",
                    data:JSON.stringify({"person":person,"bodysJson":bodysJson,"chkJson":chkJson,"id":id,"run_times":run_times,"concurrent":concurrent,"note":note,"headersJson":headersJson,"project_id":project_id,"module_id":module_id,"effect":effect,"method":method,"req_type":req_type,"host":host,"path":path,"pre_caseId":pre_caseId}),
                    success: function(result){
                        if(result.id){
                            $('#id').val(result.id.id);
                            $('#case_id').val(result.id.caseId);
                            $("#redTips").html('<span id="redTips" style="color:red;left:300px">此时为更新状态!</span>');
                            layer.msg("保存成功!");
                        }
                   }
                });
                return false;
          });

          $("#headersJson").mouseleave(function(){

            value = $('#headersJson').val();
            try{
                objValue = JSON.parse(value);
                dd = JSON.stringify(objValue, null, 4);
                $('#headersJson').val(dd);
            }catch{}
          });
          $("#bodysJson").mouseleave(function(){

            value = $('#bodysJson').val();
            try{
                objValue = JSON.parse(value);
                dd = JSON.stringify(objValue, null, 4);
                $('#bodysJson').val(dd);
            }catch{}
          });


          //layer.min(index);
          form.render();
    });
</script>
{% endblock %}